<template>
	<view class="wrapper">
		<u-button plain icon="reload" text="刷新" type="primary" @click="onPrimaryClick"></u-button>
		<u-image radius="4" :showLoading="true" :src="src" mode="widthFix" width="100%" height="auto"
			bgColor="rgba(0, 0, 0, .7)" v-if="src" @click="onDetailClick">
			<template v-slot:loading>
				<view style="font-size: 12px;height: 100px;display: flex;align-items: center;justify-content: center;">
					<u-loading-icon color="#000"></u-loading-icon>
				</view>
			</template>
			<view slot="error"
				style="font-size: 12px;height: 100px;display: flex;align-items: center;justify-content: center;">
				加载图片失败，请重新生成
			</view>
		</u-image>
		<u-loading-page :loading="isLoading" bg-color="rgba(0, 0, 0, .3)" loadingText="生成中"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				src: '',
				isLoading: false,
				form: {
					method: 'mobile',
					lx: ''
				},
				radiolist: [{
						name: '手机',
						value: 'mobile'
					},
					{
						name: '电脑',
						value: 'pc'
					}
				]
			}
		},
		mounted() {
			this.onPrimaryClick()
		},
		methods: {
			onPrimaryClick() {
				this.isLoading = true
				const url = 'https://cn.apihz.cn/api/img/apihzimgbz.php?id=88888888&key=88888888&type=1&imgtype=0'
				// const url = 'https://api.52vmy.cn/api/img/tu/mo'
				uni.request({
					url,
					method: 'get',
					success: res => {
						this.isLoading = false
						this.src = res.data.msg
					},
					fail: err => {
						this.isLoading = false
					}
				})
			},
			onDetailClick() {
				uni.navigateTo({
					url: `/pages/play/wallpaperDetail?url=${this.src}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;

		/deep/ button {
			margin: 0 0 20px;
		}

		/deep/ .u-image {
			height: auto !important;
			min-height: 100px;
		}
	}
</style>